<template>
    <ElDialog v-model="dialogVisible" width="1000px" :title="title" :z-index="900">
        <el-form ref="formRef" :model="validateForm" :disabled="props.type === 'view'" label-width="160px" class="demo-ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="产品名称" prop="productName" :rules="{ required: true, message: '请输入产品名称' }">
                        <el-input v-model="validateForm.productName" type="text"/>
                    </el-form-item>
                    <el-form-item label="产品简称" prop="productShotName" :rules="{ required: true, message: '请输入产品简称' }">
                        <el-input v-model="validateForm.productShotName" type="text"/>
                    </el-form-item>
                    <el-form-item label="资金方" prop="fundId" :rules="{ required: true, message: '请选择资金方' }">
                        <el-select v-model="validateForm.fundId" style="width: 100%;" placeholder="请选择资金方">
                            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品最低期限" prop="productTermMin" :rules="[{ required: false, message: '请输入产品最低期限' },{ type: 'number', message: '请输入数字' },]">
                        <el-input v-model.number="validateForm.productTermMin"><template #append>天</template></el-input>
                    </el-form-item>
                    <el-form-item label="产品最高期限" prop="productTermMax" :rules="[{ required: false, message: '请输入产品最高期限' },{ type: 'number', message: '请输入数字' },]">
                        <el-input v-model.number="validateForm.productTermMax"><template #append>天</template></el-input>
                    </el-form-item>
                    <el-form-item label="产品最低额度" prop="productAmtMin" :rules="[{ required: false, message: '请输入产品最低额度' },{ type: 'number', message: '请输入数字' },]">
                        <el-input v-model.number="validateForm.productAmtMin"><template #append>元</template></el-input>
                    </el-form-item>
                    <el-form-item label="产品最高额度" prop="productAmtMax" :rules="[{ required: false, message: '请输入产品最高额度' },{ type: 'number', message: '请输入数字' },]">
                        <el-input v-model.number="validateForm.productAmtMax"><template #append>元</template></el-input>
                    </el-form-item>
                    <el-form-item label="简介" prop="productSnapshot" :rules="{ required: true, message: '请输入简介' }">
                        <el-input v-model="validateForm.productSnapshot" :rows="2" type="textarea"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="分类" prop="productCategoryId" :rules="{ required: true, message: '请输入分类' }">
                        <el-select v-model="validateForm.productCategoryId" style="width: 100%;" placeholder="请选择分类">
                            <el-option v-for="item in productList" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品最低利率-年化" prop="productRateMin" :rules="[{ required: false, message: '请输入产品最低利率-年化' },{ type: 'number', message: '请输入数字' },]">
                        <el-input v-model.number="validateForm.productRateMin"><template #append>%</template></el-input>
                    </el-form-item>
                    <el-form-item label="产品最高利率-年化" prop="productRateMax" :rules="[{ required: false, message: '请输入产品最高利率-年化' },{ type: 'number', message: '请输入数字' },]">
                        <el-input v-model.number="validateForm.productRateMax"><template #append>%</template></el-input>
                    </el-form-item>
                    <el-form-item label="服务区域" prop="serviceArea" :rules="{ required: false, message: '请输入服务区域' }">
                        <el-cascader v-model="validateForm.serviceArea" :options="[{label: '全国',value: '全国'}, ...cascaderAddress()]" :props="propsCascader" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="企业成立最低年限" prop="enterpriseTimeMin" :rules="[{ required: false, message: '请输入企业成立最低年限' },{ type: 'number', message: '请输入数字' },]">
                        <el-input v-model.number="validateForm.enterpriseTimeMin"><template #append>月</template></el-input>
                    </el-form-item>
                    <el-form-item label="企业行业限制" prop="enterpriseIndustry" :rules="{ required: false, message: '请输入企业行业限制' }">
                        <el-input v-model="validateForm.enterpriseIndustry"/>
                    </el-form-item>
                    <el-form-item label="贷款用途" prop="loanUseTo" :rules="{ required: false, message: '请输入贷款用途' }">
                        <el-input v-model="validateForm.loanUseTo" :rows="2" type="textarea"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="产品内容" prop="productContent" :rules="{ required: true, message: '请输入产品内容' }">
                <div class="product_content" v-if="props.type === 'view'" v-html="validateForm.productContent"></div>
                <!-- <Wangeditor v-else v-model="validateForm.productContent"/> -->
                <Editor v-else :config-path="configPath" class="editor" v-model="validateForm.productContent"></Editor>
            </el-form-item>
        </el-form>
        <template #footer v-if="props.type !== 'view'">
            <span class="dialog-footer">
                <ElButton @click="dialogVisible = false">取消</ElButton>
                <ElButton type="primary" @click="submitForm(formRef)">确定</ElButton>
            </span>
        </template>
    </ElDialog>
</template>
<script setup>
import {ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRow, ElCol, ElCascader, ElMessage } from 'element-plus'
import { computed, ref, reactive, onMounted} from 'vue';
import {setProductManage} from '@/server/manage/product.js'
import Wangeditor from '@/components/wangEdit/wangeditor.vue'
import {cascaderAddress} from '@/utils/addressData';
import Editor from './editor.vue'

const configPath = '/ueditor/config/ueditor.config.js'
const props = defineProps(['modelValue', 'type', 'info', "productList", "types"])
const emit = defineEmits(['update:modelValue'])
// 地址选择配置
const propsCascader = {
    multiple: true,
    checkStrictly: true
}
const formRef = ref()
const validateForm = reactive({
    "productName": "",
    "productShotName": "",    
    "productCategoryId": null,
    "fundId": null,
    "productSnapshot": "",
    "productContent": "",
    "productRateMin": null,
    "productRateMax":null,
    "productTermMin":null,
    "productTermMax":null,
    "productAmtMin":null,
    "productAmtMax":null,
    "serviceArea":[],
    "enterpriseTimeMin":null,
    "enterpriseIndustry":"",
    "loanUseTo":""
})
const dialogVisible = computed({
    set:(val) => {
        emit('update:modelValue', val)
    },
    get:() => {
        return props.modelValue
    }
})
const title = computed(() => {
    let obj = {add: '新增',edit: '编辑', view: "预览" }
    return obj[props.type]
})
// 提交
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        let obj = {add: 'save',edit: 'update' }
        let params = JSON.parse(JSON.stringify(validateForm))
        // params.serviceArea = validateForm.serviceArea.join('/')

        params.serviceArea = validateForm.serviceArea.join('; ').toString()
        params.serviceArea = params.serviceArea.replace(/,/g, "/")
        setProductManage(params, obj[props.type]).then(res => {
            dialogVisible.value = false
            emit('callback')
            ElMessage({ message: "操作成功！", type: 'success'})
        })
    } else {
      return false
    }
  })
}
// 获取详情
const getDetail = () => {
    for(let key in validateForm) {
        if(props.info[key]) validateForm[key] = props.info[key]
    }
    validateForm.id = props.info.id
    validateForm.fundId = Number(props.info.fundId)
    // validateForm.serviceArea = props.info.serviceArea?.split("/")||[]
    validateForm.serviceArea = validateForm.serviceArea?.split('; ');
    validateForm.serviceArea = validateForm.serviceArea.map(item => {
        return item.split('/')
    })
}
onMounted(() => {
    if(props.type === 'edit'|| props.type === "view") {getDetail()}
})
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
.product_content{
    padding: 15px;
    border: 1px solid var(--el-border-color);
    width: 100%;
    border-radius: 4px;
}
.product_content img{
    max-width: 100%;
}
</style>